<template>
    <div>
        <header class="pr white" style="padding: 15px 0px 17px;">
            <img src="../../assets/images/7.jpg" class="displayB centerauto shadowB" style="max-width: 70%;margin: 0px auto;padding: 10px;background: #fff;" />
        </header> 
        <div class="shadowB" style="color: #fff;border-bottom: 1px solid #ebedf0;padding: 20px 15px;background: #000;z-index: 999;">
            <div>
                <div class="text-center" style="padding-bottom: 10px;">
                    <div style="font-size: 20px;" :style="moneyVal ? 'padding-top: 7px;' : ''">
                        $
                        <span :style="moneyVal ? 'font-weight: bold' : 'vertical-align: super;font-weight: bold'">{{moneyVal ? list.allmoney : '...'}}</span>
                        <img :src="isShow" width="22" style="vertical-align: sub;" @click="showFun" />
                    </div>
                    <p>账户总金额（美元）</p>
                </div>
            </div>
            <div class="clearfix">
                <p class="fl">累计总收益：<span class="bolds" style="color: #fff;">{{list.all_income}}</span></p>
                <p class="fr">昨日总收益：<span class="bolds" style="color: #fff;">{{list.yesterday}}</span></p>
            </div>
        </div>
        <div>
            <div v-for="(item,index) in list.info" :key="index" class="van-cell flexbox spacebetween">
            
                <div class="flexbox spacebetween">
                    <img :src="item.p_photo" width="60px" style="vertical-align: middle;" />
                    <div style="margin-left: 5px;">
                        <span>{{item.p_name}}</span>
                        <div class="flexbox spacebetween">
                            <p style="font_13">市值：{{item.us_securities_money}}</p>
                            <p class="margin_l15 font_13">昨日收益：{{item.us_yesterday_earnings}}</p>
                        </div>
                    </div>
                </div>
                <div>
                    <van-button type="primary" size="small" v-if="index == 0" style="height: 22px;line-height: 22px;display: block;" @click="moneyFun(item.p_id)">入金</van-button>
                    <van-button type="primary" size="small" :style="(index == 0)?'height: 22px;line-height: 22px;':''" @click="onSubmit(item.p_id)" :disabled="item.p_num == 0">抢购</van-button>
                </div>
                
            </div>
        </div>
        
        <!-- 入金 -->
        <van-dialog v-model="show" title="入金额度" show-cancel-button @confirm="onconfirm">
            
            <van-cell-group>
                <van-field v-model="money" type="number" label="额度：" placeholder="请输入金额" style="margin: 15px 0;" >
                    <van-tag slot="button" size="small" plain color="#d92626" text-color="#d92626">美金</van-tag>
                </van-field>
            </van-cell-group>
            <p class="font_sub padding_lr15" style="font-size: 12px;margin: -8px 0px 20px;">*入金金额需为<span class="colorO">整数</span></p>
        </van-dialog>
    </div>
</template>
<script>

    import '@/assets/css/main.css'
    export default {
        data(){
            return{
                list: [],
                money: '',
                show: false,
                usid: '',
                isShow: require('../../assets/images/show_icon.png'),
                moneyVal: false,
            }
        },
        methods: {
            init(){

                document.title = '证券列表';
                var _this = this;

                this.$httpGet('/api/index/project/capitaldisk',{
                    'u_id': window.localStorage.u_id,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.list = response.msg;

                    }else{
                        
                        _this.$toast(response.msg);
                    }

                });
            },
            //抢购
            onSubmit(pid){

                var _this = this;
                this.$dialog.alert({
                    message: '确认抢购吗？',
                    showCancelButton: true
                }).then(() => {
                    //抢购
                    _this.$httpGet('/api/index/project/panicBuyingSecurities',{
                        'u_id': window.localStorage.u_id,
                        'p_id': pid,
                    }).then(response => {
                        
                        if(response.code == 200){

                            _this.$toast(response.msg);
                            _this.init();

                        }else{
                            
                            _this.$toast(response.msg);
                        }

                    });
                }).catch(() => {
                    // on cancel
                });
            },
            //入金
            moneyFun(usid){
                this.usid = usid;
                this.show = true;
            },
            //确认
            onconfirm(){
                if(!this.money){
                    this.$toast('请输入金额额度');
                }else{
                    if(parseFloat(this.money)%1 != 0){
                         this.$toast('金额需是整数');
                        return;
                    }
                    this.submit();
                }
            },
            //提交入金
            submit(){

                var _this = this;

                this.$httpGet('/api/index/project/goldentry',{
                    'u_id': window.localStorage.u_id,
                    'p_id': this.usid,
                    'money': this.money,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.$toast(response.msg);
                        _this.init();

                    }else{
                        
                        _this.$toast(response.msg);
                    }

                });
            },
            showFun(){
                this.moneyVal = !this.moneyVal;
                if(this.moneyVal){
                    this.isShow = require('../../assets/images/hide_icon.png');
                }else{
                    this.isShow = require('../../assets/images/show_icon.png');
                }
            },
        },
        mounted(){
            this.init();
        },
        destroyed(){
            document.title = 'Dukascopy';
        },
    }
</script>